<!DOCTYPE HTML>

<html lang = "en" >

<head>
    <title> Test </title>

    <script type = "text/javascript" src = "../js/nav.js" >
    </script>

    <link rel = 'shortcut icon' href = '../repository/favicon.ico'>
    <link rel = 'stylesheet' type = 'text/css' href = '../css/general.css' >
</head>

<body>
	<script type = "text/javascript" >
		nav ( -1 ) ;
	</script>
</body>

<footer>
    <script type = "text/javascript" src = "../js/foot.js" >
    </script>

    <p id = "foot" > Language:

    	<select onchange = 'location.href = this.options [ this.selectedIndex ].value' id = "lang" >
    		<option value = "" selected = "selected" > English </option>
    		<option value = "" > 中文简体 </option>
    		<option value = "" > 中文繁體(中國香港及澳門) </option>
    		<option value = "" > 中文繁體(中國臺灣) </option>  
    	</select> 
    </p>

	<script type = "text/javascript" >
		if ( window.screen.width < 500 )
		{
			var new_a = document.createElement ( "a" ) ;

			new_a.innerHTML = "<img src = '../repository/menu.png' style = 'height: 50px ; width: 50px'>" ;
			new_a.style = "position: fixed; left: 10px ; top: 0px " ;
			new_a.href = "javascript:visible ();" ;

			var header = document.getElementById ( "header" ) ;

			header.appendChild ( new_a ) ;

			var title = document.getElementById ( "tit-pic" ) ;

			title.style = "margin-left: 30%" ;

			var navi_class = document.querySelector ( ".Navigation" ) ;
			var navi_a = navi_class.getElementsByTagName ( "a" ) ;

			navi_class.style = "position: fixed; left: -75%; z-index: 10; padding: 20px; border: 1px solid #000; top: 0px; transition: all .25s; height: 100%; width: 50%" ;

			for ( var i = 0 ; i < navi_a.length ; i++ ) 
				navi_a [ i ].style = "display: grid; font-size: 40pt; margin: 100px 0;" ;

			var sep = document.getElementsByClassName ( "sep" ) ;

			for ( var i = 0 ; i < sep.length ; i++ )
				sep [ i ].style = "opacity: 0" ;

			var ftnav_class = document.querySelector ( ".foot-nav" ) ;
			var ftnav_div = ftnav_class.getElementsByTagName ( "div" ) ;

			ftnav_class.style = "padding: 20px ";

			for ( var i = 0 ; i < ftnav_div.length ; i++ )
				ftnav_div [ i ].style = "display: grid; margin: 0 10px; font-size: 30pt" ;

			var lang = document.getElementById ( "foot" ) ;

			lang.style = "font-size: 30pt" ;

			var select = document.getElementsByTagName ( "select" ) ;

			select [ 0 ].style = "font-size: 25pt; height: 100px" ;
		}

		var vis = false ;

		function visible ()
		{
			if ( ! vis )
			{
				document.querySelector ( ".Navigation" ).style.left = 0 ;
				vis = true ;
			}
			else
			{
				document.querySelector ( ".Navigation" ).style.left = "-75%" ;
				vis = false ;
			}
		}

		document.addEventListener ( "click" , function ( e ) 
		{
			if ( vis && e.clientX >= 500 )
			{
				document.querySelector ( ".Navigation" ).style.left = "-75%" ;
				vis = false ;
			}
		} )
	</script>
</footer>

</html>